<template>
	<view class="main">
		<u-navbar :is-back="true" title="我的订单" :background="background" :border-bottom="false" title-color="#fff"
			title-size="35rpx" title-bold="true" back-icon-color="#fff">
		</u-navbar>

		<u-sticky offset-top="100" bg-color=" #111111;">
			<view class="tabs">
				<view class="tabw" v-for="item,index in tab" :key="index">
					<view :class="tabed==index?'taborder':'tab'" @click="tabeds(index)">
						{{item}}
					</view>
				</view>
			</view>
		</u-sticky>
		<block v-if="tabed==0">
			<view class="shop_after" v-for="orderlist,index in orderlist" :key="index">
				<view @click="router('../order_details/order_details',orderlist.status_text,orderlist.id)">
					<view class="after_tit">
						<text>订单编号：{{orderlist.order_no}}</text>
						<text class="stat">{{orderlist.status_text}}</text>
					</view>
					<view class="shop">
						<view class="left">
							<image :src="orderlist.goods_img" mode=""></image>
						</view>
						<view class="right">
							<view class="shop_tit">
								{{orderlist.goods_title}}
							</view>
							<view class="company">
								<image :src="orderlist.issuer_img" mode=""></image>
								<text>{{orderlist.issuer}}</text>
							</view>
							<view class="money">
								￥{{orderlist.goods_price}}
							</view>

						</view>
					</view>
					<view class="real">
						实付款￥{{orderlist.goods_price}}
					</view>
				</view>
				<view class="clicks">
					<block v-if="orderlist.status_text=='待支付'">
						<view class="nobuy" @click="qx(orderlist.id)">
							取消订单
						</view>
						<view class="buy">
							立即支付
						</view>
					</block>
					<view class="nobuy" @click="remove(orderlist.id)" v-if="orderlist.status_text=='已取消'">
						删除订单
					</view>
					<block v-if="orderlist.status_text=='已付款'&&orderlist.type==2&&orderlist.is_open==0">
						<view class="nobuy" @click="qx(orderlist.id)">
							取消订单
						</view>
						<view class="buy" @click="chihk(orderlist.id)">
							拆盲盒
						</view>
					</block>
					<block v-if="orderlist.is_open==1">
					<view class="nobuy" @click="remove(orderlist.id)">
						删除订单
					</view>
						<view class="buyed">
							已拆开
						</view>
					</block>
					<block v-if="orderlist.status_text=='已付款'&&orderlist.type==1||orderlist.type==3">
						<view class="nobuy" @click="qx(orderlist.id)">
							取消订单
						</view>
					</block>
					
					<!--<block v-if="已取消"></block> -->
				</view>
			</view>

			<!-- @click="router('../order_details/order_details')" -->
			<!-- <view class="shop_after" v-if="orderlist.type==2" v-for="orderlist,index in orderlist" :key="index">
				<view class="after_tit">
					<text>订单编号：{{orderlist.order_no}}</text>
					<text class="stat">{{orderlist.status_text}}</text>
				</view>
				<view class="shop">
					<view class="left">
						<image :src="orderlist.goods_img" mode=""></image>
					</view>
					<view class="right">
						<view class="shop_tit">
							{{orderlist.goods_title}}
						</view>
						<view class="company">
							<image :src="orderlist.issuer_img" mode=""></image>
							<text>{{orderlist.issuer}}</text>
						</view>
						<view class="money">
							￥{{orderlist.goods_price}}
						</view>

					</view>
				</view>
				<view class="real">
					实付款￥{{orderlist.goods_price}}
				</view>
				<view class="clicks">
					
					<block v-if="orderlist.is_open==0">
						<view class="nobuy" @click="remove(orderlist.id)">
							删除订单
						</view>
						<view class="buy" @click="chihk(orderlist.id)">
							拆盲盒
						</view>
					</block>

					<block v-if="orderlist.is_open==1">
						<view class="buy">
							删除订单
						</view>
						<view class="buyed">
							已拆开
						</view>
					</block>
				</view>
			</view> -->

		</block>
		<block v-if="tabed==1">
			<view class="shop_after" v-if="orderlist.status_text=='待支付'" v-for="orderlist,index in orderlist"
				:key="index">
				<view @click="router('../order_details/order_details',orderlist.status_text,orderlist.id)">
					<view class="after_tit">
						<text>订单编号：{{orderlist.order_no}}</text>
						<text class="stat">{{orderlist.status_text}}</text>
					</view>
					<view class="shop">
						<view class="left">
							<image :src="orderlist.goods_img" mode=""></image>
						</view>
						<view class="right">
							<view class="shop_tit">
								{{orderlist.goods_title}}
							</view>
							<view class="company">
								<image :src="orderlist.issuer_img" mode=""></image>
								<text>{{orderlist.issuer}}</text>
							</view>
							<view class="money">
								￥{{orderlist.goods_price}}
							</view>

						</view>
					</view>
					<view class="real">
						实付款￥{{orderlist.goods_price}}
					</view>
				</view>
				<view class="clicks">
					<block v-if="orderlist.status_text=='待支付'">
						<view class="nobuy" @click="qx(orderlist.id)">
							取消订单
						</view>
						<view class="buy">
							立即支付
						</view>
					</block>
				</view>
			</view>
		</block>
		<block v-if="tabed==2">
			<view class="shop_after" v-if="orderlist.status_text=='已付款'" v-for="orderlist,index in orderlist"
				:key="index">
				<view @click="router('../order_details/order_details',orderlist.status_text,orderlist.id)">
					<view class="after_tit">
						<text>订单编号：{{orderlist.order_no}}</text>
						<text class="stat">{{orderlist.status_text}}</text>
					</view>
					<view class="shop">
						<view class="left">
							<image :src="orderlist.goods_img" mode=""></image>
						</view>
						<view class="right">
							<view class="shop_tit">
								{{orderlist.goods_title}}
							</view>
							<view class="company">
								<image :src="orderlist.issuer_img" mode=""></image>
								<text>{{orderlist.issuer}}</text>
							</view>
							<view class="money">
								￥{{orderlist.goods_price}}
							</view>

						</view>
					</view>
					<view class="real">
						实付款￥{{orderlist.goods_price}}
					</view>
				</view>
			<view class="clicks">
				<block v-if="orderlist.status_text=='已付款'">
					<view class="nobuy" @click="qx(orderlist.id)">
						取消订单
					</view>
				</block>

				<block v-if="orderlist.status_text=='已付款'&&orderlist.type==2&&orderlist.is_open==0">
					<view class="buy" @click="chihk(orderlist.id)">
						拆盲盒
					</view>
				</block>
			<!-- 	<block v-if="orderlist.is_open==1">
				<view class="nobuy" @click="remove(orderlist.id)">
					删除订单
				</view>
					<view class="buyed">
						已拆开
					</view>
				</block> -->
	<!-- 			<block v-if="orderlist.status_text=='已付款'&&orderlist.type==1||orderlist.type==3">
					<view class="nobuy" @click="qx(orderlist.id)">
						取消订单
					</view>
				</block> -->
				
				<!--<block v-if="已取消"></block> -->
			</view>
				
			</view>
		</block>
		<block v-if="tabed==3">
			<view class="shop_after" v-if="orderlist.status_text=='已取消'" v-for="orderlist,index in orderlist"
				:key="index">
				<view @click="router('../order_details/order_details',orderlist.status_text,orderlist.id)">
					<view class="after_tit">
						<text>订单编号：{{orderlist.order_no}}</text>
						<text class="stat">{{orderlist.status_text}}</text>
					</view>
					<view class="shop">
						<view class="left">
							<image :src="orderlist.goods_img" mode=""></image>
						</view>
						<view class="right">
							<view class="shop_tit">
								{{orderlist.goods_title}}
							</view>
							<view class="company">
								<image :src="orderlist.issuer_img" mode=""></image>
								<text>{{orderlist.issuer}}</text>
							</view>
							<view class="money">
								￥{{orderlist.goods_price}}
							</view>

						</view>
					</view>
					<view class="real">
						实付款￥{{orderlist.goods_price}}
					</view>
				</view>
				<view class="clicks">
					<block v-if="orderlist.status_text=='待支付'">
						<view class="nobuy" @click="qx(orderlist.id)">
							取消订单
						</view>
						<view class="buy" @click="router()">
							立即支付
						</view>
					</block>
					<view class="nobuy" @click="remove(orderlist.id)" v-if="orderlist.status_text=='已取消'">
						删除订单
					</view>

				</view>
			</view>
		</block>


		<!-- <u-loading :show="show" style="margin-top: 100rpx;"></u-loading> -->
		<view class="zhezhao" v-if="show" >
			<view class="pupu" @click="close">
				<!-- <image class="close" @click="close" src="../../../static/images/cha.png" mode=""></image> -->
				<image class="bgs" src="../../../static/images/mh.png" mode=""></image>
				<view class="mhtit" >
					{{mh.title}}
					
				</view>
				<image class="shopimg" :src="mh.img" mode=""></image>
				<view class="adtit">
					合约地址：
				</view>
				<view class="shopaddress">
					{{mh.chain_address}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#111111',
				},
				tab: ['全部', '待支付', '已付款', '已取消'],
				tabed: '',
				currentIndex: 0,
				orderlist: [],
				show: false,
			}
		},
		onShow() {

		},
		onLoad(options) {
			this.getorder()

		},

		methods: {

			qx(id) {
				global.$http.request({
					url: '/api/order/cancelOrder',
					data: {
						token: uni.getStorageSync('token'),
						order_id: id,
					},
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '订单取消成功',
							icon: "none",
							mask: true,
							duration: 2000
						})
						console.log(res);
					}
				})
			},
			swierChange(e) {
				this.currentIndex = e.detail.current
			},
			tabeds(e) {
				this.getorder()
				console.log(e);
				this.tabed = e
			},
			hidden(){
				this.show=false
			},
			getorder() {
				global.$http.request({
					url: '/api/order/orderList',
					data: {
						token: uni.getStorageSync('token'),
						page: 1,
						limit: 10,
					}
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res.data.data.list);
						this.orderlist = res.data.data.list
					}
				})
			},
			router(path, status, id) {
				uni.navigateTo({
					url: path,
					success: function(res) {
						console.log(id);
						res.eventChannel.emit('details', {
							data: {
								status: status,
								id: id,
							}
						})
					}
				})
			},
			close() {
				this.show = false
			},
			remove(id) {
				global.$http.request({
					url: '/api/order/delOrder',
					data: {
						token: uni.getStorageSync('token'),
						order_id: id,
					},
				}).then(res => {
					console.log();
					const that = this
					if (res.data.code == 1) {
						console.log(res);
					
							that.getorder()
						
					}
				})
			},
			//拆盲盒
			chihk(id) {
				global.$http.request({
					url: '/api/blind_order/open_blind_box',
					data: {
						token: uni.getStorageSync('token'),
						order_id: id
					}
				}).then(res => {
					if (res.data.code == 0) {
						console.log(res.data.data);
						this.mh = res.data.data
						this.show = true
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
		// height: 100%;
		font-family: PingFang SC;
		background-color: #111111;
		font-family: PingFang SC-Regular, PingFang SC;

		.main {

			height: 100%;
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.wrap {
				padding: 98rpx 32rpx 10rpx 32rpx;
			}

			.tabs {
				background-color: #111111;
				display: flex;
				justify-content: space-between;
				margin-bottom: 60rpx;

				.tabw {
					width: 186rpx;
					height: 80rpx;
					text-align: center;
					// padding: 18rpx 60rpx;
					font-size: 32rpx;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 0px;

				}

				.taborder {
					height: 68rpx;
					line-height: 68rpx;
					opacity: 1;
					font-size: 32rpx;
					font-weight: bold;
					color: #F3C860;

				}

				.tab {
					height: 68rpx;
					line-height: 68rpx;
					// background: #08080B;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					opacity: 1;
				}


			}

			.shop_after {
				margin-top: 24rpx;
				width: 686rpx;
				height: 492rpx;
				background: #181818;
				border-radius: 32rpx;
				opacity: 1;
				padding: 24rpx;

				.real {
					text-align: right;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;
				}

				.clicks {
					display: flex;
					justify-content: flex-end;

					view {
						margin: 32rpx 0 0 32rpx;
					}

					.nobuy {
						padding: 14rpx 32rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #999999;
						border-radius: 30rpx;
						opacity: 1;
						border: 2rpx solid #999999;
					}

					.buyed {
						width: 160rpx;
						text-align: center;
						padding: 14rpx 0rpx;
						background: #999999;
						border-radius: 30rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}

					.buy {
						width: 160rpx;
						text-align: center;
						padding: 14rpx 0rpx;
						background: #F3C860;
						border-radius: 30rpx;
						opacity: 1;
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}
				}

				.after_tit {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					font-weight: bold;
					color: #FFFFFF;

					.stat {
						font-size: 28rpx;
						font-weight: bold;
						color: #F3C860;

					}
				}

				.shop {
					margin: 24rpx 0;
					opacity: 1;
					display: flex;

					.left {
						width: 200rpx;
						border-radius: 32rpx;
						overflow: hidden;
						height: 200rpx;

						image {
							width: 200rpx;
							height: 200rpx;
						}
					}

					.right {
						padding-left: 24rpx;

						.shop_tit {

							font-size: 32rpx;
							font-weight: bold;
							color: #FFFFFF;
						}

						.company {
							display: flex;
							align-items: center;
							font-size: 24rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
							opacity: 0.5;
							padding: 16rpx 0 60rpx 0;

							image {
								width: 36rpx;
								height: 36rpx;
							}
						}

						.money {
							font-size: 32rpx;
							font-family: PingFang SC-Regular, PingFang SC;
							font-weight: 400;
							color: #FFFFFF;
						}

					}
				}
			}

			.zhezhao {
				position: fixed;
				top: 0;
				width: 750rpx;
				height: 100%;
				z-index: 5;

				.pupu {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin: 326rpx auto 0 auto;
					padding: 225rpx 0 60rpx 0;
					z-index: 10;
					// overflow: hidden;

					border-radius: 32rpx;
					opacity: 1;
					position: relative;

					.close {
						width: 48rpx;
						height: 48rpx;
						position: absolute;
						top: 10rpx;
						right: 10rpx;
					}
					.bgs {
						overflow: hidden;
						position: absolute;
						z-index: -1;
						top: 0rpx;
						width: 668rpx;
						height: 972rpx;
					}
					.mhtit{
						font-size: 32rpx;
						font-weight: bold;
						color: #333333;
				
					}
					.shopimg{
						width: 460rpx;
						height: 460rpx;
						margin: 24rpx 0 78rpx 0;
					}
					.adtit{
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;
						line-height: 44px;
					}
					.shopaddress{
						font-size: 28rpx;
						font-weight: bold;
						color: #FFFFFF;

					}
				}
			}
		}
	}
</style>
